<!-- 公共集合 -->
<style lang="scss">
    .workflow-itemview{
        margin-bottom:10px;
        border:1px solid #e4e7ed;
        background: #ffffff;
        padding-left:150px;
        position: relative;
        .list-item{
            padding:10px 0;
            padding-left:50px;
            position: relative;
            &::after{
                content: "";
                position: absolute;
                bottom:0;
                left:0;
                height:1px;
                width:100%;
                background: #f3f3f3;
            }
            &:last-child:after{
                display: none;
            }
            .title{
                font-size: 14px;
                font-weight: 400;
                color: #333333;
                cursor: pointer;
                line-height: 24px;
                position: relative;
                &:hover{
                    color:#2f6bcf;
                }
                .time{
                    color: #868686;
                }
            }
            .content{
                font-size: 12px;
                line-height: 26px;
                color: #868686;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                padding-right:100px;
                .once{
                    color:#f19b2c;
                }
                .repeat{
                    color:#128c4e;
                }
            }
            .photo{
                position: absolute;
                top: 15px;
                left: 0;
            }

            .actions{
                position: absolute;
                right: 0;
                top: 32px;
                font-size: 14px;
                line-height: 30px;
                color:#868686;
                *{
                    margin-left:10px;
                }
                i{
                    font-size:14px !important;
                    cursor: pointer;
                }
            }
            .time-text{
                    position: absolute;
                    right: 0;
                    top:14px;
                    color: #868686;
                }
                .time-text.red-box::before{
                    content: "";
                    width:6px;
                    height:6px;
                    border-radius: 100%;
                    background: #D24D57;
                    position: absolute;
                    left: -16px;
                    top: 5px;
                }
        }
        .color-gold{
            color:#f7ba2a;
        }
        .itemview-search{
            padding: 5px 20px;
            background: #f4f7fd;
            color: #333333;
            .wf-keyword-input {
                width: 110px;
            }
            .wf-date-input {
                width: 205px;
            }
            .el-date-editor .el-range-separator {
              width: auto;
            }
            .search{
                color:#2f6bcf;
                cursor: pointer;
                margin-left: 10px;
            }
            .createTask{
                font-size: 14px;
                cursor: pointer;
                color: #2f6bcf;
                margin-right:10px;
            }
            .radio-group{
                padding : 10px 0 10px;
                font-size: 12px;
                vertical-align: inherit;
                label{
                    font-weight: normal;
                    .el-radio__label{
                        font-size: 12px;
                    }
                }
            }
        }
        .itemview-search-ie9 {
            .wf-keyword-input {
                width: 95px;
            }
            .wf-date-input {
                width: 220px;
            }
            .el-input__inner {
                line-height: normal;
            }
            .el-date-editor .el-range-input {
                width: 33%;
            }
        }
        .je-vue-listview{
            padding:0;
            .listview-body{
                padding:10px 20px;
            }
            .je-vue-pagebar{
                background: #f4f7fd;
                height: 50px;
                line-height: 50px;
                padding: 0 20px;
            }
        }
        .itemview-tree{

        }
    }
</style>
<template>
  <div class="workflow-itemview">
    <item-tree
      ref="tree"
      @itemClick="load"
      :data="menuData"
    />
    <div class="itemview-body">
      <!-- 查询 -->
      <div class="itemview-search">
        {{ keywordLabel || $t('_workflow.keyword') }}：
        <el-input
          v-model="keyword_"
          @keyup.enter.native="load"
          @input="inputChange($event)"
          @clear="load"
          class="wf-keyword-input"
          size="mini"
          placeholder=""
          clearable
        />
        {{ $t('_workflow.date') }}：<el-date-picker
          v-model="time"
          :start-placeholder="$t('_workflow.begin')"
          :end-placeholder="$t('_workflow.end')"
          @change="load"
          size="mini"
          type="daterange"
          range-separator="至"
          class="wf-date-input"
        />
        <span
          @click="load"
          class="search"
        >{{ $t('_workflow.search') }}</span>
        <el-radio-group
          v-model="isNandY"
          @change="load"
          v-if="['APPROVED','OWNER'].indexOf(type) != -1"
          class="radio-group"
        >
          {{ $t('_workflow.screening') }}：
          <el-radio label="0">
            {{ $t('_workflow.unfinished') }}
          </el-radio>
          <el-radio label="1">
            {{ $t('_workflow.finished') }}
          </el-radio>
        </el-radio-group>
      </div>
      <!-- 列表 -->
      <je-listview
        ref="list"
        v-loading="loading"
        :total-count="totalCount"
        :page-size="pageSize"
        :empty-height="emptyHeight"
        :item-height="itemHeight"
        @buildData="buildData"
      >
        <!-- 数据项 -->
        <div
          slot="listitem"
          v-for="(item,index) in data"
          :key="index"
          class="list-item"
        >
          <!-- 标题 -->
          <div
            @click="itemClick(item,index)"
            v-html="getTitle(item)"
            v-show="isNandY=='0'"
            class="title"
          />
          <div
            @click="itemClick(item,index)"
            v-html="getTitleFinished(item)"
            v-show="isNandY=='1'"
            class="title"
          />
          <!-- 日期 -->
          <div
            :class="{'red-box':item.priority == '1'}"
            class="time-text"
          >
            {{ validateTime(item) }}
          </div>
          <!-- 内容 -->
          <div
            v-html="getContent(item)"
            v-show="isNandY=='0'"
            class="content"
          />
          <div
            v-html="getContentFinished(item)"
            v-show="isNandY=='1'"
            class="content"
          />
          <!-- 头像 -->
          <div
            v-html="getPhoto(item)"
            v-show="isNandY=='0'"
            class="photo"
          />
          <div
            v-html="getPhotoFinished(item)"
            v-show="isNandY=='1'"
            class="photo"
          />
          <div class="actions">
            <el-tooltip
              :content="type == 'DELAY' ? $t('_workflow.canceldelay') : $t('_workflow.adddelay')"
              class="item"
              effect="dark"
              placement="bottom-start"
            >
              <i
                v-if="item.bean.SY_AUDFLAG != 'ENDED' && type !='APPROVED'"
                :class="type == 'DELAY' ? 'color-gold' : ''"
                @click="doDelay(item)"
                class="jeicon jeicon-time-o"
              />
            </el-tooltip>
            <el-tooltip
              :content="item.priority == '1'?$t('_workflow.unmark'): $t('_workflow.mark')"
              class="item"
              effect="dark"
              placement="bottom-start"
            >
              <i
                :class="[item.priority == '1'?'jeicon-stars color-gold':'jeicon-stars-o']"
                @click="doStar(item)"
                class="jeicon"
              />
            </el-tooltip>
          </div>
        </div>
        <slot
          slot="listitem"
          name="listitem"
        />
      </je-listview>
    </div>
  </div>
</template>
<script>
import ListView from '../../../../components/listview/listview';
import ItemTree from './item_tree.vue';
import Action from './action.js';
import Util from '../../util/util.js';

export default {
  name: 'ItemView',
  components: { 'je-listview': ListView, ItemTree },
  mixins: [Action],
  props: {
    type: {
      type: String,
      default: '',
    },
    pageSize: {
      type: Number,
      default: 10,
    },
    menuData: {
      type: Array,
      default: () => [],
    },
    keywordLabel: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      time: [], // 时间区间查询
      keyword: '', // 关键字查询
      keyword_: '',
      isNandY: '0', // 流程是否完结
      totalCount: 0, // 总条数，绑定分页条
      data: [],
      loading: true,
      emptyHeight: 180, // 空数据的容器高
      itemHeight: 70, // 数据项高
    };
  },
  computed: {
    startDate() {
      return this.time && this.time[0] ? Ext.Date.format(this.time[0], 'Y-m-d') : '';
    },
    endDate() {
      return this.time && this.time[1] ? Ext.Date.format(this.time[1], 'Y-m-d') : '';
    },
  },
  mounted() {
    const that = this;
    if (!JE.isNotEmpty(JE.__USERS__)) {
      $(document).on('mysubscrible', () => {
        that.load();
      });
    } else {
      this.load();
    }
    // 增加IE9浏览器类名 处理IE9兼容性样式
    if (Ext.isIE9m) {
      this.$nextTick(() => {
        const doms = document.getElementsByClassName('itemview-search');
        for (let i = 0; i < doms.length; i++) {
          const dom = doms[i];
          if (dom.className.indexOf('itemview-search-ie9') < 0) {
            dom.classList.add('itemview-search-ie9');
          }
        }
      });
    }
  },
  methods: {
    inputChange() {
      this.$forceUpdate();
    },
    getSelectNode() {
      return this.$refs.tree.selectNode;
    },
    /**
     * 获得分页信息
     */
    getList() {
      return this.$refs.list;
    },
    getTitle(item) {
      const time = Ext.Date.format(Ext.Date.parse(item.createTime, 'Y-m-d H:i:s'), 'm月d日');
      return `${item.bean.SY_CREATEUSERNAME}，${item.proccessName} <span class="time">${time}</span>`;
    },
    getTitleFinished(item) {
      const time = Ext.Date.format(Ext.Date.parse(item.createTime, 'Y-m-d H:i:s'), 'm月d日');
      return `${item.bean.SY_CREATEUSERNAME} 提交的${item.proccessName}，审批结束 <span class="time">${time}</span>`;
    },
    getPhoto(item) {
      return JE.getUserPhoto(item.bean.SY_CREATEUSERID, true);
    },
    getPhotoFinished(item) {
      if (!item.bean) return;
      return JE.getUserPhoto(item.bean.SY_CREATEUSERID, true);
    },
    validateTime(item) {
      return JE.getDate4Msg(Ext.Date.parse(item.createTime, 'Y-m-d H:i:s'));
    },
    /**
     * 任务内容
     */
    getContent(item) {
      return `${Util.formatKeyword(JE.Action.getFlowUserInfo(item, this.type), this.keyword)}，${JE.Action.getFlowCommentInfo(item)}`
    },
    getContentFinished(item) {
      if (item.bean) {
        return item.context;
        // `${Util.formatKeyword(JE.Action.getFlowUserInfo(item, this.type), this.keyword)}${item.bean.endInfo.assignee}， 意见: ${item.bean.endInfo.comments}`;
      }
      return '';
    },
    formatTime(time) {
      return Ext.Date.format(Ext.Date.parse(time, 'Y-m-d H:i:s'), 'm/d H:i');
    },
    load() {
      this.keyword = this.keyword_;
      this.getList().load();
    },
  },
};
</script>
